﻿@model MTO.Library.Web.Controllers.Customers.ViewModels.CustomerIndexViewModel

@{
    ViewBag.Title = "Customers";
}

@section ScriptsContent
{
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $("#AddCustomerWindow button:submit, #EditCustomerWindow button:submit").live("click", function (e)
            {
                e.preventDefault();
                var win = $(this).closest(".t-window").data('tWindow');
                var form = $($("form", win.element)[0]);
                var actionUrl = form.attr("action");
                var params = form.serializeArray();

                $.ajax(
                {
                    type: "POST",
                    url: actionUrl,
                    data: params,
                    async: false,
                    success: function (data, textStatus, jqXHR)
                    {
                        if (data.Success)
                        {
                            $("#CustomersGrid").data("tGrid").ajaxRequest();
                            win.close();
                        }
                        else
                        {
                            win.content(data);
                        }
                    }
                });
            });
        });

        var cachedAddCustomerWindowContent = "";

        function AddCustomer()
        {
            var win = $("#AddCustomerWindow").data('tWindow');
            win.center().open();

            if (cachedAddCustomerWindowContent != "")
            {
                win.content(cachedAddCustomerWindowContent);
                return;
            }

            $.get("Customers/Create", function (data, textStatus, jqXHR)
            {
                cachedAddCustomerWindowContent = data;
                win.content(cachedAddCustomerWindowContent);
            });
        }

        function EditCustomer(id)
        {
            var win = $("#EditCustomerWindow").data('tWindow');
            win.center().open();

            $.get("Customers/Edit", { id: id }, function (data, textStatus, jqXHR)
            {          
                win.content(data);
            });
        }

        function CustomerWindow_CloseButton(button)
        {
            var win = $(button).closest(".t-window").data("tWindow");
            win.close();
        }

        function AddCustomerWindow_OnLoad(e)
        {
            $("#CustomerWindowFormActionsTemplate").tmpl({ submitTitle: "Créer" }).appendTo("#AddCustomerWindow");
        }

        function AddCustomerWindow_OnClose(e)
        {
            $(".t-window-content", this).empty();
        }

        function EditCustomerWindow_OnLoad(e)
        {
            $("#CustomerWindowFormActionsTemplate").tmpl({ submitTitle: "Modifier" }).appendTo("#EditCustomerWindow");
        }

        function EditCustomerWindow_OnClose(e)
        {
            $(".t-window-content", this).empty();
        }
    </script>

    <script id="CustomerWindowFormActionsTemplate" type="text/x-jquery-tmpl">
        <div class="t-window-footer">
            <button type="submit" class="t-button t-state-default">${submitTitle}</button>
            <button type="button" onclick="CustomerWindow_CloseButton(this)" class="t-button">Annuler</button>
        </div>
    </script>
}

<style type="text/css">
    #customerFieldset .control-label
    {
        width: 100px;
    }
    
    #customerFieldset .controls
    {
        margin-left: 110px;
    }
</style>

<p>
    <button id="AddCustomer" class="t-button t-state-default" onclick="AddCustomer()">Ajouter un client</button>
</p>

<p>
@{
    Html.Telerik().Grid<MTO.Library.Web.Controllers.Customers.ViewModels.CustomerIndexGridModel>()
        .Name("CustomersGrid")
        .BindTo(Model.CustomerGridModel.Data)
        .Columns(columns =>
        {
            columns
                .Bound(x => x.CustomerId)
                .Width(50);
            columns
                .Bound(x => x.FirstName);
            columns
                .Bound(x => x.LastName)
                .Width(150);
            columns
                .Bound(x => x.StreetAdress)
                .Width(150);
            columns
                .Bound(x => x.ZipCode)
                .Width(150);
            columns
                .Template(
                    @<text>
                        <button class="t-button" onclick="EditCustomer(@item.CustomerId)">Edit</button>
                    </text>
                    )
                .ClientTemplate(
                    "<button class='t-button' onclick='EditCustomer(<#= CustomerId #>)'>Edit</button>"
                )
                .Width(110);
        })
        .Pageable(page =>
        {
            page.PageSize(10);
            page.Total(Model.CustomerGridModel.Total);
        })
        .DataBinding(x =>
        {
            x.Ajax().Select("GetCustomerIndexGridData", "Customers");
        })
        .EnableCustomBinding(true)
        .Render();
}
</p>

@{ 
    Html.Telerik().Window()
        .Name("AddCustomerWindow")
        .Title("Ajout d'un nouveau client")
        .Draggable(true)
        .Modal(true)
        .Buttons(b => b.Close())
        .Width(600)
        .Height(300)
        .Visible(false)
        .ClientEvents(events =>
        {
            events.OnLoad("AddCustomerWindow_OnLoad");
            events.OnClose("AddCustomerWindow_OnClose"); 
        })
        .Render();
}

@{ 
    Html.Telerik().Window()
        .Name("EditCustomerWindow")
        .Title("Modification d'un client")
        .Draggable(true)
        .Modal(true)
        .Buttons(b => b.Close())
        .Width(600)
        .Height(300)
        .Visible(false)
        .ClientEvents(events =>
        {
            events.OnLoad("EditCustomerWindow_OnLoad");
            events.OnClose("EditCustomerWindow_OnClose");
        })
        .Render();
}

